<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人博客</title>
    <script>
        // 响应式布局基础：根据屏幕宽度设置根元素字体大小
        // 设计稿基准：PC端1920px，移动端750px
        function setRemUnit() {
            const designWidth = window.innerWidth >= 768 ? 1920 : 750;
            const rootFontSize = (window.innerWidth / designWidth) * 10;
            document.documentElement.style.fontSize = rootFontSize + 'px';
        }
        // 初始化
        setRemUnit();
        // 窗口大小改变时重新计算
        window.addEventListener('resize', setRemUnit);
    </script>
    <style>
        /* 基础样式重置 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: 'Microsoft YaHei', sans-serif;
            background-color: #f8f9fa;
            line-height: 1.6;
        }
        .container {
            display: flex;
            margin-top: 2.5vh;
            padding: 0 5vw;
        }
        .left-column {
            width: 15%;
            background-color: white;
        }
        .right-column {
            width: 85%;
            padding-left: 1rem;
        }
        .module {
            background-color: white;
            margin-bottom: 2rem;
            padding: 1.5rem;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        /* 左侧模块样式 */
        .blog-title {
            padding-left: 20%;
            border-left: 3px solid #E1BE97;
            border-right: 1px solid #F9F4E9;
            background-color: white;
        }
        .blog-title h1 {
            font-size: 2vh;
            color: #664401;
            padding: 15% 0 15% 20%;
        }
        .nav-item {
            font-size: 1.8vh;
            color: #666;
            padding: 1rem 0 1rem 20%;
            cursor: pointer;
            transition: all 0.3s;
        }
        .nav-item:hover {
            color: #664401;
            font-weight: bold;
        }
        /* 右侧模块样式 */
        .notes-container {
            display: flex;
            flex-wrap: wrap;
            gap: 2.5rem;
        }
        .note-card {
            background-color: #F9F4E9;
            border-radius: 8px;
            padding: 1rem;
            min-width: 150px;
            transition: all 0.3s;
        }
        .note-card:hover {
            border: 1px solid #E1BE97;
        }
        .note-title {
            font-size: 1.5vh;
            color: black;
            margin-bottom: 0.5rem;
        }
        .note-date {
            font-size: 1vh;
            color: #999;
        }
        .blog-item {
            display: flex;
            margin-bottom: 2rem;
        }
        .blog-image {
            width: 500px;
            height: 120px;
            overflow: hidden;
            margin-right: 1.5rem;
        }
        .blog-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .blog-content h3 {
            font-size: 2.5vh;
            margin-bottom: 0.5rem;
        }
        .blog-content p {
            font-size: 1.5vh;
            color: #333;
        }
        /* 响应式调整 */
        @media (max-width: 768px) {
            .container {
                flex-direction: column;
            }
            .left-column, .right-column {
                width: 100%;
            }
            .right-column {
                padding-left: 0;
            }
            .blog-item {
                flex-direction: column;
            }
            .blog-image {
                width: 100%;
                margin-bottom: 1rem;
            }
            .notes-container {
                gap: 1.5rem;
            }
        }
        /* 双div示例样式 */
        .dual-divs {
            display: flex;
            justify-content: center;
            margin: 3rem 0;
            flex-wrap: wrap;
        }
        .div-1, .div-2 {
            width: 30rem;
            height: 200px;
            margin: 0 1rem;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 1.5rem;
            font-weight: bold;
        }
        .div-1 {
            background-color: #6A8CAF;
            background-image: url('https://picsum.photos/300/200?random=1');
            background-size: cover;
        }
        .div-2 {
            background-color: #B98B82;
            background-image: url('https://picsum.photos/300/200?random=2');
            background-size: cover;
        }
       
    </style>
</head>
<body>
    <div class="container">
        <div class="left-column">
            <div class="blog-title">
                <h1>个人博客</h1>
            </div>
            <div class="navigation module">
                <div class="nav-item">主页</div>
                <div class="nav-item">关于我</div>
                <div class="nav-item">博客</div>
                <div class="nav-item">笔记</div>
                <div class="nav-item">知识库</div>
                <div class="nav-item">智能体</div>
            </div>
        </div>
        <div class="right-column">
            <div class="my-notes module">
                <h2>我的笔记</h2>
                <div class="notes-container">
                    <div class="note-card">
                        <div class="note-title">生活中的无形画布</div>
                        <div class="note-date">2024.10.5</div>
                    </div>
                    <div class="note-card">
                        <div class="note-title">塑造AI的魔法</div>
                        <div class="note-date">2024.10.10</div>
                    </div>
                    <div class="note-card">
                        <div class="note-title">园艺中生命哲学的呼吸感</div>
                        <div class="note-date">2024.10.15</div>
                    </div>
                </div>
            </div>
            <div class="recent-blogs module">
                <h2>最近博客</h2>
                <div class="blog-item">
                    <div class="blog-image">
                        <img src="https://img.alicdn.com/imgextra/i2/O1CN01VjWLAB21Zb4eAatD8_!!6000000006999-2-tps-928-1232.png" alt="健康生活">
                    </div>
                    <div class="blog-content">
                        <h3>活力的源泉：健康生活的艺术与科学</h3>
                        <p>健康生活不仅仅是关于身体的活力，它是一种全面的生活方式，涉及到身体、心灵和精神的和谐统一。在这个快节奏的世界中，我们如何找到保持活力的秘诀？首先，我们需要理解健康生活的艺术——这包括了营养均衡的饮食、规律的运动...</p>
                    </div>
                </div>
                <div class="blog-item">
                    <div class="blog-image">
                        <img src="https://img.alicdn.com/imgextra/i1/O1CN01n5bYVC1LISOAf9gSM_!!6000000001276-2-tps-1232-928.png" alt="宁静角落">
                    </div>
                    <div class="blog-content">
                        <h3>在风景与人群中寻找内心的宁静角落</h3>
                        <p>在喧嚣的城市中，我们常常感到内心的喧哗和不安。然而，即使在最繁忙的街道和最拥挤的人群中，我们也能找到一片属于自己的宁静角落。这需要我们获得一种内在的力量，这是一种能够在外部世界的纷扰中保持内心平静的能力...</p>
                    </div>
                </div>
                <div class="blog-item">
                    <div class="blog-image">
                        <img src="https://img.alicdn.com/imgextra/i2/O1CN01Fi9JNQ1e59aJxBRji_!!6000000003819-2-tps-1232-928.png" alt="艺术时间">
                    </div>
                    <div class="blog-content">
                        <h3>记录艺术中时间与记忆的交汇</h3>
                        <p>艺术是时间的容器，它捕捉并保存了特定时刻的情感和体验。每一件艺术作品都是艺术家与时间对话的结果，是过去、现在和未来交汇的点。在艺术中记录时间与记忆的交汇，是一种深刻的文化实践，它让我们得以窥见历史的深度和人性的复杂性...</p>
                    </div>
                </div>
            </div>
            <!-- 双div示例 -->
            <div class="dual-divs module">
                <div class="div-1">Div 1</div>
                <div class="div-2">Div 2</div>
            </div>
        </div>
    </div>
</body>
</html>
    